<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ol li.hide {
            display: none;
        }

        ol li {
            display: block;
        }
    </style>
</head>
<body>

    <!-- 1. 先HTML/CSS -->
    <!-- 2. js选择器 -->
    <!-- 3. 添加事件 -->
    <input id="inp" type="text">
    <button id="submit">提交</button>
    <button id="search">查询</button>
    <ol>
        <!-- 动态创建的li -->
    </ol>

    <script>
        const inp = document.querySelector('#inp');
        const btn = document.querySelector('#submit');
        const ol = document.querySelector('ol');
        const searchBtn = document.querySelector('#search');

        btn.addEventListener('click', function () {
            // 如果有值
            if (inp.value) {
                // 1. 创建li
                const li = document.createElement('li');
                // 创建删除按钮
                const delBtn = document.createElement('button');
                // 1.1 li中添加文字
                li.innerText = inp.value;

                delBtn.innerText = '删除';
                delBtn.addEventListener('click', function () {
                    // 点击删除要做的事
                    li.remove();
                });
                // 把创建好的删除按钮加到li中
                li.appendChild(delBtn);
                // 2. 把创建好的li扔ol里
                ol.appendChild(li);
                // 清空input的值
                inp.value = '';
            } else {
                alert('写点东西吧');
            }
        });

        searchBtn.addEventListener('click', function () {
            // 1. 获取input框中的内容
            const content = inp.value;
            // 2. 依次和li中的内容比对
            const lis = document.querySelectorAll('ol li');
            for (const li of lis) {
                // 内容比对
                if (li.innerText.includes(content)) {
                    li.removeAttribute('class');
                } else {
                    li.setAttribute('class', 'hide');
                }
            }
        });

    </script>
</body>
</html>